/*
 * @Author: 何 海深 813936564@qq.com
 * @Date: 2022-11-18 19:14:22
 * @LastEditors: 何 海深 813936564@qq.com
 * @LastEditTime: 2023-08-28 09:38:07
 * @FilePath: \datashowapicture\src\views\villageHome\components\videoMap\mixins.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/* 弹窗拖动逻辑 */
import { ref } from 'vue'
const hooks = () => {
  const selfPopUpModelRef: any = ref(null) // 弹窗ref
  const innerWidth = window.innerWidth
  const innerHeight = window.innerHeight
  const popUpMoveData = {
    isMove: false,
    mouseUPInfo: {
      x: 0,
      y: 0,
      layerX: 0,
      layerY: 0
    }, // 鼠标移动信息
    popUpHTMLDefaultInfo: {},
    // 保存弹窗的位置
    popUpModelInfo: {
      top: 0,
      left: 0
    }
  }
  // 鼠标点击
  const doOnmouseDown = async (e: any) => {
    popUpMoveData.isMove = true
    popUpMoveData.mouseUPInfo.x = await e.x
    popUpMoveData.mouseUPInfo.y = await e.y
    popUpMoveData.mouseUPInfo.layerX = e.layerX
    popUpMoveData.mouseUPInfo.layerY = e.layerY
    popUpMoveData.popUpModelInfo.left = selfPopUpModelRef.value.offsetLeft
    popUpMoveData.popUpModelInfo.top = selfPopUpModelRef.value.offsetTop
    popUpMoveData.popUpHTMLDefaultInfo = await getPopUpMOdelMsg()
    doMouseMove()
  }
  // 鼠标松开

  const doOnMouseUp = () => {
    popUpMoveData.isMove = false
    window.onmousemove = null
  }
  // 鼠标移动
  const doMouseMove = () => {
    window.onmousemove = onMouseMoveHandler
  }
  // 移动逻辑方法
  const onMouseMoveHandler = (e: any) => {
    let isMoveChange = false
    isMoveChange = popUpMoveData.isMove
    if (isMoveChange) {
      isMoveChange = false
      const setLeft = e.x - popUpMoveData.mouseUPInfo.x
      const setTop = e.y - popUpMoveData.mouseUPInfo.y
      // 鼠标超出范围不可拖动
      if (e.x <= 20 || e.y <= 20 || e.x >= innerWidth - 20 || e.y >= innerHeight - 20) {
        window.onmouseup = () => ((window.onmousemove = null), (popUpMoveData.isMove = false))
        return false
      }
      selfPopUpModelRef.value.style.left = popUpMoveData.popUpModelInfo.left + setLeft + 'px'
      selfPopUpModelRef.value.style.top = popUpMoveData.popUpModelInfo.top + setTop + 'px'
      isMoveChange = true
      window.onmouseup = () => ((window.onmousemove = null), (popUpMoveData.isMove = false))
    }
    // }
  }
  // 获取弹窗元素属性
  const getPopUpMOdelMsg = () => {
    const HTMLInfo = selfPopUpModelRef?.value?.getBoundingClientRect()
    return HTMLInfo
  }
  window.onmouseup = () => ((window.onmousemove = null), (popUpMoveData.isMove = false))
  return {
    selfPopUpModelRef,
    popUpMoveData,
    doOnmouseDown,
    doOnMouseUp,
    doMouseMove,
    onMouseMoveHandler,
    getPopUpMOdelMsg
  }
}
export default hooks
